<template>
  <div class="w-full">
    <div class="mt-20 fontmedium text-white textlogo">
      <span class="mt-4">智慧管理系统</span>
    </div>
    <div class="xingyuvlogin">
      <div class="mxauto">
        <div class="h-full flex">
          <div class="mr-4">
            <div class="myautoleft">
              <img src="/src/assets/svg/login-box-bg.svg" style="width:100%">
              <!-- <img src="/src/assets/svg/login-box-bg.svg" style="width:66%"> -->
            </div>
          </div>
        </div>
      </div>

      <!-- 登录 -->
      <div v-if="loginstate" class="loginform">
        <h2 class="formtitle">手机登录</h2>
        <el-form :model="formLabelAlign" :rules="rules" ref="ruleFormRef">
          <el-form-item prop="phone">
            <el-input placeholder="手机号码" clearable size="large" v-model="formLabelAlign.phone" />
          </el-form-item>
          <el-form-item  prop="code">
            <el-input class="yzminput" clearable placeholder="短信验证码" size="large" v-model="formLabelAlign.code" />
            <el-button size="large" :disabled="isSend"  @click="getVerificationCode">{{timer}}</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="formPush" class="loginbtn">登录</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="register" type="success" plain  class="zhucebtn">注册</el-button>
          </el-form-item>
        </el-form>
		<p class="tips">* 请注册账号再登录</p>
      </div>


      <!-- 注册 -->
     <div v-if="!loginstate" class="loginform">
        <h2 class="formtitle">注册</h2>
        <el-form :model="formLabelAlign">
          <el-form-item>
            <el-input placeholder="手机号码" clearable size="large" v-model="formLabelAlign.phone" />
          </el-form-item>
          <el-form-item>
            <el-input class="yzminput" clearable placeholder="短信验证码" size="large"
              v-model="formLabelAlign.code" />
            <el-button :disabled="isSend" size="large">{{timer}}</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" class="loginbtn">确定</el-button>
          </el-form-item>

        </el-form>
      </div>

    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref,getCurrentInstance } from 'vue'
import type { FormItemProps, FormProps,FormInstance, FormRules  } from 'element-plus'
import { ElMessage } from 'element-plus'
import {useRouter} from 'vue-router';

const { proxy } = getCurrentInstance();
const router = useRouter();
const labelPosition = ref < FormProps['labelPosition'] > ('right')
const itemLabelPosition = ref < FormItemProps['labelPosition'] > ('')
const formLabelAlign = reactive({
  phone: '',
  code: '',
})
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  phone:'' ,
  code: ''
})

let loginstate = ref(true);
let timer = ref("获取验证码");
let isSend = ref(false);
let num = 60;
let interval
interface RuleForm {
  phone: string
  code: string
}
// const validatePhone = (rule, value, callback) => {
//   const reg = /^1[3-9]\d{9}$/;
//   if (!value) {
//     return callback(new Error('手机号不能为空'));
//   }
//   if (!reg.test(value)) {
//     return callback(new Error('请输入正确的手机号'));
//   }
//   callback();
// };
const rules = reactive<FormRules<RuleForm>>({
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { min: 11, max: 11, message: '手机号格式不正确', trigger: 'blur' },
  ],
  code: [
    {required: true,message: '请输入正确的验证码',trigger: 'change'},
  ],
})

const register = () => {
  loginstate.value = false
}

const getVerificationCode = ()=>{
	let regIdPhone = /^1(2|3|4|5|6|7|8|9)\d{9}$/;
	  if (!regIdPhone.test(formLabelAlign.phone)) {
		ElMessage.error("您输入的手机号格式有误！")
	  } else {
		isSend.value = true;
		timer.value = num + "s重新获取";
		interval = setInterval(() => {
			console.log(num)
		  num--;
		  timer.value = num + "s重新获取";
		  console.log(timer.value)
		  if (num < 1) {
			isSend.value = false;
			timer.value = "发送验证码";
			num = 60;
			window.clearInterval(interval);
		  }
		}, 1000);
		// this.$http.djsendCodeDocApi({ mobile: this.form.phone }).then((res) => {
		//   if (res.data.code == 200) {
		// 	this.getCode = res.data.data;
		// 	console.log(this.getCode, '验证码')
		// 	this.time = num + "s重新获取";
		// 	timer = setInterval(() => {
		// 	  num--;
		// 	  this.time = num + "s重新获取";
		// 	  if (num < 1) {
		// 		this.isInput = true;
		// 		this.time = "发送验证码";
		// 		num = 60;
		// 		window.clearInterval(timer);
		// 	  }
		// 	}, 1000);
		//   } else {
		// 	// this.$toast({ message: res.data.message, duration: 3000 });
		//   }
		// });
	  }
}

const formPush = ()=>{
	
	ruleFormRef.value.validate((valid) => {
	    if (valid) {
	      ElMessage.success('登录成功');
		  localStorage.setItem("token",'111111111')
		  router.push("/visitorinfo");
	      // 这里可以执行提交表单的逻辑
	    } else {
	      ElMessage.error('表单验证失败');
	      return false;
	    }
	  });
	
	
	// router.push("/home");
	// proxy.$http.post("/login", { phone:formLabelAlign.phone,code:formLabelAlign.code })
	// .then((res) => {
	// 	console.log(res)
	// 	if(res.code==200){
	// 		// localStorage.setItem("token",res.data)
	// 		router.push("/visitorinfo");
	// 	}else{
	// 		router.push("/visitorinfo");
	// 	}
	//  }).catch((error)=>{
	// 	 console.log(error)
	// 	 router.push("/visitorinfo");
	// 	 // localStorage.setItem("token",'123456')
	// 	 // router.push("/home");
	// 	 // console.log(error)
	//  });
}
</script>

<style lang="scss" scoped>
.xingyuvlogin::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-left: -48%;
  content: '';
  background-image: url(/src/assets/svg/login-bg.svg);
  background-repeat: no-repeat;
  background-position: 100%;
  background-size: auto 100%;
}

.loginbtn {
  width: 100%;
}
.tips{
	color:#999;
	font-size: 12px;
}
.formtitle {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: bold;
  margin-bottom: 20px;
}

.yzminput {
  width: 270px;
}

.textlogo {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 999;
  font-weight: bold;
}

.zhucebtn {
  width: 100%;
}

.mr-4 {
  height: 100%;
}

.text-white {
  color: #fff
}

.mt-20 {
  margin-top: 20px;
}

.fontmedium {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.mxauto {
  position: absolute;
  justify-content: center;
  top: 18%;
  left: 8%;
}

.myautoleft {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: stretch;
  flex-direction: column;
  height: 100%;
  width: 50%;
}

::v-deep .el-form-item__content {
  align-items: center;
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  font-size: var(--font-size);
  line-height: 32px;
  min-width: 0;
  position: relative;
  justify-content: space-between;
}

.loginform {
  position: absolute;
  background: #fff;
  padding: 40px;
  width: 400px;
  height: 300px;
  right: 8%;
  top: 30%;
}

/* 自适应布局 */
@media (max-width: 1024px) {
  .loginform {
    position: absolute;
    background: #fff;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 260px;
    margin: auto;
    padding: 24px;
    // box-shadow: 0px 0px 6px #ccc;
    border-radius: 6px;
  }

  .myautoleft {
    display: none;
  }

  .yzminput {
    width: 130px;
  }

  .fontmedium[data-v-4ca33632] {
    font-size: 1.375rem;
    line-height: 1.35rem;
  }

  .xingyuvlogin::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-left: 0;
    content: '';
    background: #2c41b4;
    // background-image: url(/src/assets/svg/login-bg.svg);
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: auto 100%;

  }
}

</style>